<template>
	
	<view class="form_examine_page">
		
		<view class="status-bar"></view>
		<ee-nav-bar :title="pageName" bgColor="#fff"></ee-nav-bar>
		
		<scroll-view class="flex1" scroll-y="true">
			
			<view class="form_content_box">
				
				<view class="">
					<view class="form_title">申请详情</view>
					<component
						v-for="(field, index) in fields"
						:key="index"
						:is="componentMap[field.type]"
						:id="field.id"
						:label="field.label"
						:value="formData[field.id]"
						:isRequired="field.isRequired"
						@update:value="updateFormData(field.id, $event)"
					>
					</component>
				</view>
				
				
			</view>
			
		</scroll-view>
		
		<view class="opa_bottom_box">
			<view class="submit_btn" @click="submitFormTwo">提交</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		
	</view>
	
</template>

<script setup>
	
	import { ref, reactive } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import RadioFiled from "./component/radioForm.vue";
	const pageName = ref(''); //这是存储页面的标题A
	
	const formData = reactive({
	  name: '',
	  email: '',
	  description: '',
	});
	
	const componentMap = {
		radioFiled: RadioFiled
	};
	
	// 这是数据到时候是调用接口，接口直接给到的，但是拿到这个数据，我们要直接创建一个动态的 formData 变量，这样我们可以直接进行所有数据的获取
	const fields = reactive ([
		{ id: 'name', label: '报销类型', type: 'radioFiled', isRequired: true }
	]);
	
	const updateFormData = (id, value) => {
		formData[id] = value;
	};
	
	const submitForm = () => {
	  const isValid = fields.every((field) => {
		if (field.isRequired && !formData[field.id]) {
		  alert(`${field.label} is required`);
		  return false;
		}
		return true;
	  });

	  if (isValid) {
		console.log('Form submitted:', formData);
	  }
	};
	
	
	const submitFormTwo = () => {
		// 先做校验，判断必填的是否都填写好了，没问题，数据提交成功，接口也没报错，那么再进行页面的跳转
		uni.navigateTo({
			url: '/pages/userexamine/userexamine',
		})
	}
	
	onLoad((options) => {
		if (!options) return;
		console.log('上级页面传来的数据=========>', options);
		pageName.value = options.name;
	})
	
</script>

<style lang="scss" scoped>
	
	.form_examine_page {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #F7F8FC;
		.form_content_box {
			position: relative;
			padding: 28rpx 40rpx;
			.form_title {
				position: relative;
				padding-left: 20rpx;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: left;
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					width: 4rpx;
					height: 28rpx;
					background: #0077FF;
					border-radius: 2rpx;
					margin-top: -14rpx;
					z-index: 2;
				}
			}
		}
		.opa_bottom_box {
			position: relative;
			padding: 40rpx;
			background: #fff;
			.submit_btn {
				position: relative;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: #0077FF;
				border-radius: 16rpx;
			}
		}
	}
	
</style>